<!--
 * @Author: hrg
 * @Date: 2023-04-10 20:43:49
 * @LastEditTime: 2023-06-30 17:26:03
 * @FilePath: \study_-vuejs\dome\study_vue_demo\2.收集表单数据.html
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>learn vue</title>
  <script src="./vue.js"></script>
</head>

<body>


  <div id="root">
    <h1>收集表单数据</h1>
    账号：<input type="text" v-model="userInfo.loginname"> <br><br>
    密码：<input type="password" v-model="userInfo.password"><br><br>
    性别：
    男<input type="radio" name="sex" value="man" v-model="userInfo.sex">
    女<input type="radio" name="sex" value="woman" v-model="userInfo.sex">
    <br><br>
    爱好：
    抽烟<input type="checkbox" value="smoking" v-model="userInfo.hobby">
    喝酒<input type="checkbox" value="Take a drink" v-model="userInfo.hobby">
    烫头<input type="checkbox" value="perm" v-model="userInfo.hobby">
    <br><br>
    所属校区：
    <select name="" id="" v-model="userInfo.school">
      <option value="">请选择校区</option>
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
      <option value="chongqing">重庆</option>
    </select>
    <br><br>
    其他信息：
    <textarea v-model="userInfo.otherInfo"></textarea>
    <br><br>
    <input type="checkbox" v-model="userInfo.isSelect">
    阅读并接受<a href="https://www.baidu.com">《用户协议》</a>
    <button @click.prevent="sbummit">提交数据</button>
  </div>
  <script>
    Vue.config.productionTip = false
    // 通过计算属性进行的过滤
    const vm = new Vue({
      el: '#root',
      data: {
        userInfo:{
          loginname:'',
          password:'',
          sex:'woman',
          hobby:[],
          school:'beijing',
          otherInfo:'',
          isSelect:true

        }
      },
      methods: {
        sbummit(){
          console.log('展示信息',this.userInfo)      
        }
      },
      
    });

  </script>

</body>

</html>